<template>
    <div>
        <div>

            <b-input-group class="mb-4" style="width:50%;margin:0 auto;">
                <b-select v-model="selected" :options="options"/>
                <b-input placeholder="请输入搜索关键字" />
                <b-btn class="btn-info" slot="append">搜索</b-btn>
            </b-input-group>

            <b-card :header="resultTitle" header-tag="h6" class="mb-4">

                <div class="third-result" v-for="resultItem in resultList" :key="resultItem.title">
                    <div class="r-logo"></div>
                    <div class="r-content">
                        <h5 class="r-title">{{resultItem.title}}</h5>
                        <p class="r-desc">商标名:联合利丰</p>
                        <div class="r-btn-container">

                            <div style="display:inline-block;" class="mr-4" v-for="report in resultItem.reportUrlMap" :key="report.label">

                                <Badge :dot="report.cacheNum > 0">
                                    <b-btn variant="info" class="r-btn" size="sm" @click="goReportRecord(report)">
                                        {{report.label}}
                                    </b-btn>
                                </Badge>

                            </div>

                        </div>
                    </div>
                </div>
                <!-- <infinite-loading @infinite="infiniteHandler"></infinite-loading> -->
            </b-card>
        </div>
    </div>
</template>

<style scoped>
.card-body {
    padding: 0;
}
.third-result {
    padding: 20px;
    border-bottom: 1px solid #ebdfdf;
    font-size: 14px;
}

.r-logo {
    display: inline-block;
    width: 100px;
    height: 80px;
    padding: 10px;
    border: 1px solid #ebdfdf;
    margin-right: 10px;
    background-image: url("/static/img/bg/1.jpg");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

.r-content {
    display: inline-block;
}
.r-title {
    font-weight: bold;
}

.r-desc {
    color: gray;
}
</style>


<script>
import InfiniteLoading from "vue-infinite-loading";
export default {
    name: "ThridReport",
    data() {
        return {
            selected: 0,
            options: [
                { text: "全部", value: 0 },
                { text: "阿里云", value: 1 },
                { text: "腾讯云", value: 2 }
            ],
            resultList: [
                {
                    title: "深圳市联合利丰供应链管理有限公司",
                    logo: "",
                    reportUrlMap: [
                        {
                            url: "http://baidu.com",
                            label: "360报告",
                            cacheNum: 0
                        },
                        {
                            url: "http:taobao.com",
                            label: "阿里云报告",
                            cacheNum: 100
                        },
                        {
                            url: "http:xx.com",
                            label: "星象报告",
                            cacheNum: 3
                        },
                        {
                            url: "http:tyc.com",
                            label: "天眼查报告",
                            cacheNum: 5
                        },
                        {
                            url: "http:qcc.com",
                            label: "企查查报告",
                            cacheNum: 1
                        }
                    ]
                },
                {
                    title: "江西联合利丰有限公司",
                    logo: "",
                    reportUrlMap: [
                        {
                            url: "http://baidu.com",
                            label: "360报告",
                            cacheNum: 2
                        },
                        {
                            url: "http:taobao.com",
                            label: "阿里云报告",
                            cacheNum: 2
                        },
                        {
                            url: "http:xx.com",
                            label: "星象报告",
                            cacheNum: 3
                        },
                        {
                            url: "http:tyc.com",
                            label: "天眼查报告",
                            cacheNum: 5
                        },
                        {
                            url: "http:qcc.com",
                            label: "企查查报告",
                            cacheNum: 1
                        }
                    ]
                },

                {
                    title: "梅州市联合证券有限公司",
                    logo: "",
                    reportUrlMap: [
                        {
                            url: "http://baidu.com",
                            label: "360报告",
                            cacheNum: 2
                        },
                        {
                            url: "http:taobao.com",
                            label: "阿里云报告",
                            cacheNum: 2
                        },
                        {
                            url: "http:xx.com",
                            label: "星象报告",
                            cacheNum: 3
                        },
                        {
                            url: "http:tyc.com",
                            label: "天眼查报告",
                            cacheNum: 5
                        },
                        {
                            url: "http:qcc.com",
                            label: "企查查报告",
                            cacheNum: 1
                        }
                    ]
                },
                {
                    title: "广州市合利集团有限公司",
                    logo: "",
                    reportUrlMap: [
                        {
                            url: "http://baidu.com",
                            label: "360报告",
                            cacheNum: 2
                        },
                        {
                            url: "http:taobao.com",
                            label: "阿里云报告",
                            cacheNum: 2
                        },
                        {
                            url: "http:xx.com",
                            label: "星象报告",
                            cacheNum: 3
                        },
                        {
                            url: "http:tyc.com",
                            label: "天眼查报告",
                            cacheNum: 5
                        },
                        {
                            url: "http:qcc.com",
                            label: "企查查报告",
                            cacheNum: 1
                        }
                    ]
                }
            ]
        };
    },
    computed: {
        resultTitle: function() {
            return "为您找到" + this.resultList.length + "条搜索结果";
        }
    },
    methods: {
        goReportRecord(report) {
            let vm = this;
            if (report.cacheNum === 0) {
                if (confirm("是否抓取数据")) {
                    vm.$Message.success("公司缓存数据成功!");
                    report.cacheNum = 1;
                }
            }else{
                // vm.$router.push({
                //     url: '/thirdreport/record'
                // })
                vm.$router.push("/thirdreport/record")
            }
        },
        infiniteLoading($state) {
            let vm = this;
            setTimeout(() => {
                const temp = [];
                for (
                    let i = vm.resultList.length + 1;
                    i <= vm.resultList.length + 20;
                    i++
                ) {
                    temp.push(vm.resultList);
                }
                this.resultList = this.resultList.concat(temp);
                $state.loaded();
            }, 1000);
        }
    }
};
</script>

